<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI 特效 - .show() 演示</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <style>
        .toggler {
            width: 500px;
            height: 200px;
        }
        
        #button {
            padding: .5em 1em;
            text-decoration: none;
        }
        
        #effect {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
        
        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>

</head>

<body>

    <div class="toggler">
        <div id="effect" class="ui-widget-content ui-corner-all">
            <p>
                Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
            </p>
        </div>
    </div>



    <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
</body>
<script>
    $(function() {
        // 运行当前选中的特效
        function runEffect() {

            // 从中获取特效类型
            var selectedEffect = "scale";
            console.log(selectedEffect);
            // 大多数的特效类型默认不需要传递选项
            var options = {};
            // 一些特效带有必需的参数
            if (selectedEffect === "scale") {
                options = {
                    percent: 100,
                };
            } else if (selectedEffect === "size") {
                options = {
                    to: {
                        width: 680,
                        height: 385
                    }
                };
            }

            // 运行特效
            $("#effect").animate({
                left: '1050px',
                opacity: '1',
                height: '150px',
                width: '250px',
            }, 2000, "easeOutElastic").show(null, 1000, callback);
        };

        // 回调函数
        function callback() {
            setTimeout(function() {
                $("#effect:visible").removeAttr("style").fadeOut();
            }, 1000);
        };

        // 根据选择菜单值设置特效
        $("#button").click(function() {
            runEffect();
            return false;
        });

        $("#effect").hide();
    });
</script>

</html>